#set( $symbol_pound = '#' )
#set( $symbol_dollar = '$' )
#set( $symbol_escape = '\' )
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Tree Actions - jQuery EasyUI Demo</title>
    <link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="../../themes/icon.css">
    <link rel="stylesheet" type="text/css" href="../demo.css">
    <script type="text/javascript" src="../../jquery.min.js"></script>
    <script type="text/javascript" src="../../jquery.easyui.min.js"></script>
</head>
<body>
<h2>Tree Actions</h2>

<p>Click the buttons below to perform actions.</p>

<div style="margin:20px 0;">
    <a href="${symbol_pound}" class="easyui-linkbutton" onclick="collapseAll()">CollapseAll</a>
    <a href="${symbol_pound}" class="easyui-linkbutton" onclick="expandAll()">ExpandAll</a>
    <a href="${symbol_pound}" class="easyui-linkbutton" onclick="expandTo()">ExpandTo</a>
    <a href="${symbol_pound}" class="easyui-linkbutton" onclick="getSelected()">GetSelected</a>
</div>
<div class="easyui-panel" style="padding:5px">
    <ul id="tt" class="easyui-tree" data-options="url:'tree_data1.json',method:'get',animate:true"></ul>
</div>
<script type="text/javascript">
    function collapseAll() {
        ${symbol_dollar}
        ('${symbol_pound}tt').tree('collapseAll');
    }
    function expandAll() {
        ${symbol_dollar}
        ('${symbol_pound}tt').tree('expandAll');
    }
    function expandTo() {
        var node = ${symbol_dollar}('${symbol_pound}tt').tree('find', 113);
        ${symbol_dollar}
        ('${symbol_pound}tt').tree('expandTo', node.target).tree('select', node.target);
    }
    function getSelected() {
        var node = ${symbol_dollar}('${symbol_pound}tt').tree('getSelected');
        if (node) {
            var s = node.text;
            if (node.attributes) {
                s += "," + node.attributes.p1 + "," + node.attributes.p2;
            }
            alert(s);
        }
    }
</script>
</body>
</html>